import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { PageBaseStyles } from '../../../base'
import { SoCommonPage } from './common'

export class SoIndexEncyclopediaPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoIndexEncyclopediaPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly pageBaseStyles: PageBaseStyles = PageBaseStyles.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoIndexEncyclopediaPage {
    if (!SoIndexEncyclopediaPage.instance) {
      SoIndexEncyclopediaPage.instance = new SoIndexEncyclopediaPage()
    }
    return SoIndexEncyclopediaPage.instance
  }

  init(): void {
  }

  getMainStyles(): string {
    return `
  /* 隐藏样式 */
  &:has(${generateHideSelector('.so-nav-container')}):has(${generateHideSelector('#login-part-tools')}) {
    #g-hd {
      background-color: transparent !important;
    }
  }
  &:has(${generateHideSelector('#login-part-tools')}) {
    .so-nav-container {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  }
    
  /* 顶部菜单*/
  #g-hd {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    
    .so-nav-container {
      background-color: var(${this.themeVarService.search.header.background}) !important;
      border-bottom: none !important;
      
      a {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      li {
        &.so-nav-container__item {
          &:hover {
            a {
              color: var(${this.themeVarService.tab.textHover}) !important;
            }
          }
          
          &.activated-tab {
            &::after {
              height: 2px !important;
              background-color: var(${this.themeVarService.tab.textActive}) !important;
            }

            a {
              color: var(${this.themeVarService.tab.textActive}) !important;
            }
          }
        }
      }
    }
  }
  
  #login-part-tools {
    .so-header-menu-item__title {
      color: var(${this.themeVarService.search.default.text}) !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
      
      a {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
    }
  }

  .so-header {
    background-color: transparent !important;
  }
  
  #banner-box {
    background-color: transparent !important;
    
    li {
      background-color: transparent !important;
    }
  }
  
  .wrap {
    .container {
      .h2-big {
        ${this.pageBaseStyles.titleStyles()}
        
        > a {
          color: var(${this.themeVarService.message.warning.textPrimary}) !important;
        }
      }
      
      #attention-ul {
        li {
          &:hover {
            background-color: transparent !important;
            
            h3 a {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }

          h3 {
            a {
              color: var(${this.themeVarService.search.default.text}) !important;
              
              &:hover {
                text-decoration: none !important;
              }
            }
          }
          
          .right-txt {
            a {              
              &:hover {
                text-decoration: none !important;
              }
            }
          }
        }
      }
      
      .rewardmodbk {
        .h2-big  {
          > a {
            color: var(${this.themeVarService.message.warning.textPrimary}) !important;
          }
        }
        
        .reward-category-wrap {
          border: none !important;
          
          .reward-category-item {
            a {
              &:hover {
                .reward-category-entry {
                  background-color: transparent !important;
                  
                  .edit-name {
                    text-decoration: none !important;
                    color: var(${this.themeVarService.link.default.text}) !important;
                  }
                }
              }

              .reward-category-entry {
                border-right: none !important;

                .edit-name {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
            }
          }
        }
        
        .reward-area-change {
          background-color: transparent !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
        }
      }
      
      [data-log=history-more-home] {
        color: var(${this.themeVarService.search.default.text}) !important;
              
        &:hover {
          text-decoration: none !important;
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }

      .hist-box {
        li {
          .hist-con {
            border-right: none !important;
            
            a {
              color: var(${this.themeVarService.link.default.text}) !important;
              
              &:hover {
                text-decoration: none !important;
                color: var(${this.themeVarService.link.default.textHover}) !important;
              }
            }
          }
        }
      }
      
      .rightside {
        .rtBox {
          border-bottom: none !important;
        
          h2 {
            border-bottom: none !important;
            ${this.pageBaseStyles.titleStyles()}
          }
          
          ul {
            li {
              border-bottom: none !important;
              
              &:hover {
                background-color: transparent !important;
              }

              a {
                color: var(${this.themeVarService.search.default.text}) !important;
                
                &:hover {
                  text-decoration: none !important;
                  color: var(${this.themeVarService.link.default.textHover}) !important;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .link-box-wrap {
    .link-box {
      background-color: transparent !important;
      
      h2 {
        ${this.pageBaseStyles.titleStyles()}
      }
      
      .link-box-item {
        li {
          p {
            color: var(${this.themeVarService.search.default.text}) !important;
          }

          .atitle {
            color: var(${this.themeVarService.link.default.text}) !important;

            &:hover {
              color: var(${this.themeVarService.link.default.textHover}) !important;
            }
          }
        }
      }
    }
  }
  
  /* 页脚 */
  ${this.commonPage.footStyles()}
    `
  }
}
